<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>注册</title>

  <script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
  <style type="text/css">
    body {
     
      text-align: center;
    }

    .lp-login {
      position: absolute;
      width: 500px;
      height: 300px;
      top: 50%;
      left: 50%;
      margin-top: -250px;
      margin-left: -250px;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 0 10px #cbcbdb;
      padding: 57px 50px 35px;
      box-sizing: border-box
    }


    .lp-login .submitBtn {
      display: block;
      text-decoration: none;
      height: 48px;
      width: 150px;
      line-height: 48px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      background-image: -webkit-gradient(linear, left top, right top, from(#1024e7e8), to(#1024e7e8));
      background-image: linear-gradient(90deg, #1024e7e8, #1024e7e8);
      border-radius: 3px
    }


    input[type='text'] {
      height: 30px;
      width: 250px;
    }

    input[type='password'] {
      height: 30px;
      width: 250px;
    }

    span {
      font-style: normal;
      font-variant-ligatures: normal;
      font-variant-caps: normal;
      font-variant-numeric: normal;
      font-variant-east-asian: normal;
      font-weight: normal;
      font-stretch: normal;
      font-size: 14px;
      line-height: 22px;
      font-family: "Hiragino Sans GB", "Microsoft Yahei", SimSun, Arial, "Helvetica Neue", Helvetica;
    }

  </style>

</head>
<body>

<form>
  <table class="lp-login">
    <tr>
      <td align="right"><span>邮箱</span></td>
      <td align="center">
        <input type="text" id="username"/>
      </td>
    </tr>
    <tr>
      <td align="right"><span>密码</span></td>
      <td align="center">
        <input type="password" id="password"/>
      </td>
    </tr>
    <tr>
      <td align="right"><span>确认密码</span></td>
      <td align="center">
        <input type="password" id="confirmPassword"/>
      </td>
    </tr>
    <tr>
      <td align="right"><span>验证码</span></td>
      <td align="center">
        <input type="text" id="code"/>
      </td>
      <td colspan="2">
        <a href="#" id="codeBtn"><span>获取验证码</span></a>
      </td>
    </tr>
    <tr align="center">
      <td colspan="2">
        <a href="#" class="submitBtn"><span>注 册</span></a>
      </td>
    </tr>
  </table>
</form>

</body>
<script type="text/javascript">
  $(function () {
    $(".submitBtn").bind("click", function () {
      var confirmPassword = $("#confirmPassword").val();
      var password = $("#password").val();
      var username = $("#username").val();
      var code = $("#code").val();
      if (username == null || $.trim(username).length == 0) {
        alert("sorry,必须输入邮箱~");
        return;
      }
      if (password == null || $.trim(password).length == 0) {
        alert("sorry,必须输入密码~");
        return;
      }
      if (confirmPassword == null || $.trim(confirmPassword).length == 0) {
        alert("sorry,必须输入确认密码~");
        return;
      }
      if (code == null || $.trim(code).length == 0) {
        alert("sorry,必须输入验证码~");
        return;
      }

      if (confirmPassword != password) {
        alert("两次输入密码不一致");
        return;
      }

      $.ajax({
        url: 'http://localhost/api/user/isRegistered/' + username.split(' ')[0],
        type: 'GET',    //GET
        async: false,    //或false,是否异步
        timeout: 5000,    //超时时间
        success: function (resp) {
          if (true === resp) {
            alert("该邮箱已经注册");
          } else {
            $.ajax({
        	  url: 'http://localhost/api/user/register/' + username.split(' ')[0] + "/" + password.split(' ')[0] + "/" + code.split(' ')[0],
        	  type: 'GET',    //GET
        	  async: false,    //或false,是否异步
        	  timeout: 5000,    //超时时间
        	  success: function (data) {
          	  	if (true === data) {
            	  window.location.href = "/static/welcome.html";
            	  return false;
          	  	} else {
            	  alert("注册失败,请重试");
          	  	}
          	  },
          	  error:function(data) {
          		if (data.status = 429) {
            	   alert("您频繁进行注册，请求已被拒绝");
          	  	}
        	  }
      	   });
          }
        }
      });

      
    });

    $("#codeBtn").bind("click", function () {
      var username = $("#username").val();
      if (username == null || $.trim(username).length == 0) {
        alert("sorry,必须输入邮箱~");
        return;
      }

      $("#codeBtn").attr("disabled",true).css("pointer-events","none");
      //延迟执行
      window.setTimeout(function() {
        $('#codeBtn').removeAttr("disabled").css("pointer-events","auto");;
      }, 10000);
      $.ajax({
        url: 'http://localhost/api/code/create/' + username.split(' ')[0],
        type: 'GET',    //GET
        async: false,    //或false,是否异步
        timeout: 5000,    //超时时间
        success: function (resp) {
          if (true === resp) {
            alert("验证码发送成功,请在对应的邮箱内查收");
          } else {
            alert("验证码发送失败,请在10s后重试");
          }
        }
      })
    });
  })

</script>
</html>
